<template>
  <div>
    <div class="popWin" v-if="show">
      <div class="popWinBg" v-if="show"></div>
      <div class="popWinMain" ref="popWinMain" v-if="show">
        <bg></bg>
        <div class="headTitle">
          <p>{{ title }}</p>
        </div>
        <div class="popClose" ref="popClose" v-if="showInner" @click="getHide"></div>
        <div class="slot" v-if="showInner">
<!--          <VideoPlayer :url="url"></VideoPlayer>-->
          <VideoPlayer :videoSrc="mp4" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import gsap from 'gsap'
import bg from './bg.vue'
import VideoPlayer from '@/components/VideoPlayer/index.vue';
import mp4 from '../../assets/mp4/mp4.mp4'
export default {
  data() {
    return {
      mp4,
      show: false,
      showInner: false,
      url: '',
      title: ''
    }
  },
  components: {bg, VideoPlayer},
  computed: {},
  mounted() {
  },
  methods: {
    getShow(e) {
      var that = this;
      this.title = e.title
      // that.url = e
      that.show = true
      that.$nextTick(() => {
        gsap.to(this.$refs.popWinMain, {
          duration: 1, height: '600px', onComplete: () => {
            this.showInner = true
            this.$nextTick(() => {
              gsap.to(this.$refs.popClose, {
                duration: 1, transform: ' rotateX(180deg)', onComplete: () => {
                  this.showInner = true
                }
              })
            })
          }
        })
      })

    },
    getHide() {
      this.showInner = false
      this.$nextTick(() => {
        gsap.to(this.$refs.popWinMain, {
          duration: 1, height: '0%', onComplete: () => {
            this.show = false
          }
        })
      })
    }
  },
}
</script>

<style lang="scss" scoped>
.popWinBg {
  position: fixed;
  z-index: 10;
  width: 100%;
  background: rgba(0, 0, 0, 0.4);
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: initial;
}

.popWin {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: flex-start;
  position: fixed;
  z-index: 121;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  pointer-events: none;

}

.popWinMain {
  pointer-events: initial;
  position: relative;
  overflow: hidden;
  width: 800px;
  max-width: 800px;
  height: 0%;
  max-height: 1004px;
  z-index: 100;

  .slot {
    position: absolute;
    top: 80px;
    left: 30px;
    width: calc(100% - 60px);
    height: calc(100% - 100px);
    //background: red;
  }
}

.popClose {
  position: absolute;
  right: 10px;
  top: 10px;
  background: url("./assets/icon_close.png") no-repeat;
  width: 64px;
  height: 64px;
  background-size: 100% 100%;
  cursor: pointer;
  z-index: 1;
}

.headTitle {
  height: 80px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: flex-start;
  margin-left: 30px;
  font-size: 24px;
  font-family: PangMenZhengDao;
}
</style>
